<template>
  <div>
    <el-form   label-width="120px"  ref="addTeacherUploadForm">
      <!-- 代码中的1表示第几个 和引入js的type变量对应 -->
      <el-form-item label="店铺">


        <el-upload  class="upload-demo" ref="upload"
                    action="getUploadUrl"
                    list-type="picture-card"
                    :limit="3"
                    name="file"
                    :multiple="true"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :file-list="fileLists"
                    :auto-upload="false"
                    :http-request="uploadFiles"
        >
          <i class="el-icon-plus"></i>

  </el-upload>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import api from "../../../../axios/api"

    export default {
      data() {
        return {
          fileLists:[],
          formDatas:""
        };
      },
      methods: {
        uploadFiles(file){
          //console.log(file.file)
         // console.log("uploadFile");
          this.formDatas.append('file', file.file);
          this.fileLists.push(file);
        },
        submitUpload() {
          console.log("submitUpload");
          console.log(this.formDatas['file']);
          this.formDatas = new FormData()
          this.$refs.upload.submit(); //执行此步骤 相当于执行 http-request 的自定义实现方法
          this.formDatas.append('model', "house");
          //console.log(this.formDatas);
          let config = {
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          }
          api.setDataFromAxios(this.$store.state.host+"/uploadImg",this.formDatas,"post",config).then( dto => {
            console.log(dto)
            if(dto.code==200) {

              this.$message.success("上传成功");
              this.fileLists = [];
              let urls = dto.obj.split(",");
              for(let i=0;i<urls.length;i++){
                let fileObj = {};
                fileObj.name="file";
                fileObj.url = this.$store.state.host + "/upload/images/house/" + urls[i];
                console.log(fileObj.url);
                this.fileLists .push(fileObj);
              }
            }else{
              this.$message.error("上传失败");
            }
          }).catch( res => {
            console.log(res)
          })
        },
        handleRemove(file, fileLists) {
          console.log(file, fileLists);
          Array.prototype.remove = function(v) {
            if (isNaN(v) || v > this.length) {
              return false
            }
            for (let i = 0, j = 0; i < this.length; i++) {
              if (this[i] != this[v]) {
                this[j++] = this[i]
              }
            }
            this.length -= 1


          }
          fileLists.remove(file)
        },
        handlePreview(file) {

        }
      }
    }
</script>

<style scoped>

</style>
